<template>
    <div style="padding: 15px 16px">
      <el-form :model="pageParams" ref="searchForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="请求路径" prop="path">
          <el-input
            v-model="pageParams.path"
            placeholder="请输入关键字"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item label="IP" prop="ip">
          <el-input
            v-model="pageParams.ip"
            placeholder="请输入关键字"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item label="服务名" prop="serviceId">
          <el-input
            v-model="pageParams.serviceId"
            placeholder="请输入关键字"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item label="clientId" prop="clientId">
          <el-input
            v-model="pageParams.clientId"
            placeholder="请输入关键字"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-if="$hasauth('baseInfoAdd')"
          >新增</el-button>
        </el-col>

        <right-toolbar :showSearch.sync="showSearch" @queryTable="handleSearch"></right-toolbar>
      </el-row>
      <pageTable ref="pageTable"
                 :url="$apis.gateway.getAccessLogs"
                 :columns="columns"
                 :params="pageParams">
            <template slot="action" slot-scope="{scope}">
              <el-button size="mini" @click="showDetail(scope)">详情</el-button>
            </template>
      </pageTable>
    </div>
</template>

<script>
  import { readUserAgent } from '@/utils/util'
    export default {
        name: "index",
        components: {},
        data() {
            return {
              showSearch: true, // 显示搜索条件
              pageParams: {}, // 请求参数
              columns: [
                { type: 'index', label: '#', align: 'center', width: 50 },
                { prop: 'path', label: '请求地址', showOverflowTooltip: true, minWidth: 220 },
                { prop: 'method', label: '请求方式', width: 100 },
                { prop: 'ip', label: 'IP', width: 150 },
                { prop: 'region', label: '区域', width: 200, align: 'center' },
                { prop: 'terminal', label: '终端',
                  render: (h, params) => {
                    return h('div', readUserAgent(params.row.userAgent).terminal)
                  }
                },
                { prop: 'browser', label: '浏览器',
                  render: (h, params) => {
                    return h('div', readUserAgent(params.row.userAgent).browser)
                  }
                },
                { prop: 'serviceId', label: '服务名', width: 200 },
                { prop: 'httpStatus', label: '响应状态', width: 200 },
                { prop: 'useTime', label: '耗时', width: 120,
                  render: (h, params) => {
                    return h('div', (params.row.useTime ? params.row.useTime : 0) + ' ms')
                  }
                },
                { prop: 'requestTime', label: '请求时间', width: 200 },
                { prop: 'clientId', label: 'clientId', showOverflowTooltip: true, width: 200 },
                { slot: 'action', label: '详情', width: 100, fixed: 'right' }
              ]
            }
        },
        mounted() {
          this.handleSearch()
        },
        methods: {
          /** 查询数据 */
          handleSearch(){
            this.$refs.pageTable.search()
          },
          /** 重置 */
          handleReset(){
            this.resetForm("searchForm");
            this.handleSearch();
          },
          /** 新增按钮操作 */
          handleAdd() {},
          // 刷新
          handleReload () {
            this.$refs.pageTable.reload()
          },
          showDetail(row){
            console.log(row, '详情')
          },

        }
    }
</script>

<style scoped>

</style>
